<template>
	<!-- 
		瀑布流横向实现flex
		备注：容器必须有固定高度且高度大于最高的列高  固定高度可以根据当前渲染内容自行计算
	 -->
	<view class="container">
		<view class="item item1" ref="item1">
			<view class="article part1">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>						
		</view>
		<view class="item item2"  ref="item2">
			<view class="article part2">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>	
		</view>
		<view class="item item3"  ref="item3">
			<view class="article part3">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>						
		</view>
		<view class="item item4"  ref="item4">
			<view class="article">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>	
		</view>
		<view class="item item5"  ref="item5">
			<view class="article">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>						
		</view>
		<view class="item item6"  ref="item6">
			<view class="article">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>	
		</view>
		<view class="item item7"  ref="item7">
			<view class="article">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>						
		</view>
		<view class="item item8"  ref="item8">
			<view class="article">
				<view class="article-img">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/article-short.png" mode="widthFix" class="article-img"></image>
				</view>
				<view class="title">诚信布艺"精品时尚且有功能性,首选诚信布艺"</view>
				<view class="author">
					<view class="author-info">
						<view class="ico"><image lazy-load="true"  src="../../static/images/user-ico.png" class="ico"></image></view>
						<view class="name">狗蛋作品</view>
					</view>
					<view class="share">
						<view class="text">现金200+</view>
						<view class="share-ico">
							<image lazy-load="true"  src="../../static/images/article-share-ico.png" class="share-ico"></image>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="good"><view>点赞</view><view class="good-num">265</view></view>
					<view class="discuss"><view>评论</view><view class="discuss-num">156</view></view>
					<view class="see"><view>浏览</view><view class="see-num">278</view></view>						
				</view>	
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:8
			}
		},
		created() {
		
			setTimeout(function(){
				for(var a=0;a<this.num;a++){
					this.getElSize(a+1)
				}
			}.bind(this),2000)
				
			
		},
		methods: {
			getElSize(id) {
			     let info = uni.createSelectorQuery().select(".part"+id);
				 console.log(info)
			    　　　  　info.boundingClientRect(function(data) { //data - 各种参数
			    　　　  　console.log(data)  // 获取元素宽度
			    　　    }).exec()
			},
			
		},
		
	}
	
</script>

<style lang="scss">
		.container {
		display: flex;
		// flex-flow: column wrap;
		flex-direction: row;
		justify-content: space-between;
		// align-content: space-between;
		flex-wrap: wrap;
		//容器必须有固定高度且高度大于最高的列高
		// height: 1660px;
		border-radius: 3px;
		// padding: 20px;
		width: 100%;
		counter-reset: items;
		box-sizing: border-box;
	}
	
	.item {
		width: 345upx;
		margin-bottom: 2%;
		border-radius: 3px;
		// background-color: #a1cbfa;
		// border: 1px solid #4290e2;
		// color: #fff;
		// padding: 15px;
		box-sizing: border-box;
	}
	
	/* 仅用于打印数字 */
	.item::before {
		counter-increment: items;
		// content: counter(items);
	}
	
	/* 将内容块重排为3列 */
	.item:nth-child(2n+1) {
		order: 1;
	}
	

	.item:nth-child(2n) {
		order: 2;
	}

	
	/* 强制换列 */
	.container::before,
	.container::after {
		content: "";
		flex-basis: 100%;
		width: 0;
		order: 2;
	}
	.article-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.article{
		width: 345upx;
		border-radius: 10upx;
		box-shadow: 2px 2px 3px 1px #e5e5e5;
		margin-bottom: 15upx;
		align-self: end;
	}
	.article-img{
		width: 345upx;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
	}
	.article .title{
		font-size: 14px;
	}
	.author{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 15upx;
	}
	.author-info{
		display: flex;
		flex-direction: row;
	}
	.author .ico{
		width: 50upx;
		height: 50upx;
	}
	.author .name{
		font-size: 12px;
		color: #666666;
		margin-left: 10upx;
		position: relative;
		top: 8upx;
	}
	.share{
		height: 16px;
		display: flex;
		flex-direction: row;
		font-size: 9px;
		background-color: #b3a07a;
		color: #ffffff;
		padding: 0 15upx;
		border-radius: 25upx;
		line-height: 16px;
		position: relative;
		top: 8upx;
		right: 8upx;
	}
	.share-ico{
		width: 25upx;
		height: 25upx;
		margin-left: 5upx;
		position: relative;
		top: 2upx;
	}
	.article .info{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 10px;
		color: #999999;
		border-top: 1px solid #eeeeee;
		padding: 15upx 10upx 0 10upx;
		margin-top: 10upx;
	}
	.good,.see,.discuss{
		display: flex;
		flex-direction: row;
		margin-bottom: 15upx;
	}
</style>
